<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jotai 简易 Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/jotai@2.0.0/umd/index.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      body {
        background: linear-gradient(
          135deg,
          #1a237e 0%,
          #4527a0 50%,
          #7b1fa2 100%
        );
        color: #333;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }
      .container {
        max-width: 800px;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        margin: 20px 0;
      }
      header {
        background: #2c3e50;
        color: white;
        padding: 25px;
        text-align: center;
      }
      h1 {
        font-size: 32px;
        margin-bottom: 10px;
      }
      .subtitle {
        font-size: 18px;
        opacity: 0.9;
      }
      .content {
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
      }
      .section {
        margin-bottom: 30px;
      }
      h2 {
        font-size: 24px;
        color: #2c3e50;
        margin-bottom: 20px;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
      }
      .demo-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px;
        background: #f8f9fa;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .counter {
        font-size: 64px;
        font-weight: bold;
        color: #3498db;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      }
      .buttons {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .button {
        padding: 12px 24px;
        background: #3498db;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .button:hover {
        background: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
      }
      .button:active {
        transform: translateY(0);
      }
      .button.reset {
        background: #e74c3c;
      }
      .button.reset:hover {
        background: #c0392b;
      }
      .explanation {
        background: #e3f2fd;
        padding: 20px;
        border-radius: 10px;
        line-height: 1.6;
      }
      .code-block {
        background: #2d3436;
        color: #f5f6fa;
        padding: 20px;
        border-radius: 8px;
        font-family: "Fira Code", monospace;
        font-size: 16px;
        line-height: 1.5;
        overflow-x: auto;
      }
      .code-comment {
        color: #7f8c8d;
      }
      .atom-flow {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        margin: 20px 0;
        gap: 20px;
      }
      .atom-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 180px;
      }
      .atom-icon {
        width: 80px;
        height: 80px;
        background: #3498db;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 32px;
        margin-bottom: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      .arrow {
        font-size: 32px;
        color: #3498db;
        font-weight: bold;
      }
      footer {
        text-align: center;
        padding: 20px;
        color: white;
        font-size: 14px;
      }
      @media (max-width: 768px) {
        .atom-flow {
          flex-direction: column;
        }
        .arrow {
          transform: rotate(90deg);
          margin: 10px 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Jotai 简易 Demo</h1>
        <p class="subtitle">展示原子状态管理的基本原理</p>
      </header>

      <div class="content">
        <section class="section">
          <h2>计数器演示</h2>
          <div class="demo-area">
            <div class="counter" id="counter-value">0</div>
            <div class="buttons">
              <button class="button" id="decrement">-1</button>
              <button class="button reset" id="reset">重置</button>
              <button class="button" id="increment">+1</button>
            </div>
          </div>
        </section>

        <section class="section">
          <h2>Jotai 工作原理</h2>
          <div class="atom-flow">
            <div class="atom-step">
              <div class="atom-icon">1</div>
              <p>创建 atom</p>
              <small>使用 atom() 函数定义状态</small>
            </div>
            <div class="arrow">→</div>
            <div class="atom-step">
              <div class="atom-icon">2</div>
              <p>使用 atom</p>
              <small>组件通过 useAtom() 访问状态</small>
            </div>
            <div class="arrow">→</div>
            <div class="atom-step">
              <div class="atom-icon">3</div>
              <p>更新 atom</p>
              <small>调用 setter 函数更新状态</small>
            </div>
            <div class="arrow">→</div>
            <div class="atom-step">
              <div class="atom-icon">4</div>
              <p>重新渲染</p>
              <small>所有使用该 atom 的组件自动更新</small>
            </div>
          </div>
        </section>

        <section class="section">
          <h2>代码实现</h2>
          <div class="code-block">
            // 1. 导入 Jotai<br />
            <span class="code-comment"
              >// 注意：在实际项目中，您需要通过 npm 安装 jotai</span
            >
            <span class="code-comment"
              >// import { atom, useAtom } from 'jotai';</span
            ><br />
            <span class="code-comment"
              >// 本演示使用 CDN 引入，因此使用全局 jotai 对象</span
            ><br /><br />

            // 2. 创建 atom（状态单元）<br />
            const countAtom = jotai.atom(0);<br /><br />

            // 3. 在组件中使用 atom<br />
            function Counter() {<br />
            &nbsp;&nbsp;const [count, setCount] = jotai.useAtom(countAtom);<br /><br />

            &nbsp;&nbsp;return (<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;{count}&lt;/span&gt;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onClick={() =>
            setCount(c => c - 1)}&gt;-1&lt;/button&gt;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onClick={() =>
            setCount(0)}&gt;重置&lt;/button&gt;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onClick={() =>
            setCount(c => c + 1)}&gt;+1&lt;/button&gt;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
            &nbsp;&nbsp;);<br />
            }
          </div>
        </section>

        <section class="section">
          <h2>Jotai 优势</h2>
          <div class="explanation">
            <p>
              <strong>Jotai</strong> 是一个简单、灵活的 React
              状态管理库，采用原子模型：
            </p>
            <ul>
              <li>
                ⚛️ <strong>极简API</strong>：只需使用 atom 和 useAtom
                两个主要函数
              </li>
              <li>
                🚀 <strong>高性能</strong>：只有使用特定状态的组件才会重新渲染
              </li>
              <li>📦 <strong>轻量级</strong>：压缩后仅有 3KB 左右</li>
              <li>🛠️ <strong>TypeScript 友好</strong>：完整的类型支持</li>
              <li>
                🔗 <strong>可组合</strong>：可以通过组合简单 atom 创建复杂状态
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>

    <footer>
      <p>Jotai 简易 Demo | 展示原子状态管理的基本原理</p>
    </footer>

    <script>
      // 使用 Jotai 的 UMD 版本（通过 CDN 引入）
      const { atom, useAtom } = jotai;

      // 创建 atom（状态单元）
      const countAtom = atom(0);

      // 模拟 React 组件的渲染
      function renderCounter() {
        // 在实际的 React 应用中，我们会使用 useAtom hook
        // 这里简化实现，直接使用 atom 的 get/set 方法
        const currentCount = jotai.getAtom(countAtom).init;
        document.getElementById("counter-value").textContent = currentCount;
      }

      // 初始化渲染
      renderCounter();

      // 设置事件监听器
      document.getElementById("increment").addEventListener("click", () => {
        const currentCount = jotai.getAtom(countAtom).init;
        jotai.setAtom(countAtom, currentCount + 1);
        renderCounter();
      });

      document.getElementById("decrement").addEventListener("click", () => {
        const currentCount = jotai.getAtom(countAtom).init;
        jotai.setAtom(countAtom, currentCount - 1);
        renderCounter();
      });

      document.getElementById("reset").addEventListener("click", () => {
        jotai.setAtom(countAtom, 0);
        renderCounter();
      });
    </script>
  </body>
</html>
